<extend name="Public/base"/>
<block name="body">
    <!-- 按钮工具栏 -->
    <div class="cf">
        <div class="fl">
            <a class="btn" href="{:U()}">刷 新</a>（点击"刷新"按钮清除搜索条件，显示全部信息。）
        </div>
        <!-- 高级搜索 -->
        <form action="{:U()}" method="GET" id="J_search_form">
            <div class="search-form fr cf">
                <div class="sleft">
                    <input type="text" name="start_time" class="search-input w-100 date_select" value="{$start_time}" placeholder="起始时间"/>
                    <span class="fl line-h">至</span>
                    <input type="text" name="end_time" class="search-input w-100 date_select" value="{$end_time}" placeholder="今天"/>
                    <a class="sch-btn" href="javascript:;" id="J_search"><i class="btn-search"></i></a>
                </div>
            </div>
        </form>
    </div>
    <!-- 数据表格 -->

    <div class="data-table table-striped">
        <table>
            <thead>
            <tr>
                <th>使用种类</th>
                <th>昨日</th>
                <th>今日</th>
                <th>上周</th>
                <th>本周</th>
                <th>消费总数</th>
            </tr>
            </thead>
            <volist name="stat.dataNum" id="vo">
            <tbody>
            <tr>
                <td>{$vo.sName}</td>
                <td>{$vo.yesterday_count|default='-'}</td>
                <td>{$vo.today_count|default='-'}</td>
                <td>{$vo.pweek_count|default='-'}</td>
                <td>{$vo.week_count|default='-'}</td>
                <td>{$vo.count|default='-'}</td>
            </tr>
            </tbody>
            </volist>
        </table>
    </div>

    <div class="chart-body" style="overflow: hidden">
        <div class="box_1" id="chart_box"></div>
        <div class="cache-by">
            数据缓存于：
            {$stat.cacheTime|format_date}
            <empty name="stat.is_new">
                &nbsp; <a href="javascript:clearCache();">更新</a>
            </empty>
        </div>
        <div class="box_1" id="chart_box1"></div>
    </div>
    <style>
        .box_1{
            width: 40%;
            float: left;
            margin-right:20px;
        }
    </style>
</block>
<block name="script">
    <script language="javascript" type="text/javascript" src="__JS__/echarts/echarts-all.js"></script>
    <script language="javascript" type="text/javascript" src="__JS__/My97Date/WdatePicker.js"></script>
    <script type="text/javascript">
        function clearCache(){
            url = window.location.href;
            $.get(url, {'reload':1}, function(){
                window.location.reload();
            });
        }
        $(function() {
            //搜索
            $("#search").click(function() {
                var url = $(this).attr('url');
                var query = $('.search-form').find("select,input").serialize();
                query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
                query = query.replace(/^&/g, '');
                url += query ? ((url.indexOf('?') > - 1 ? '&' : '?') + query) : '';
                window.location.href = url;
            });

            //回车自动提交
            $('.search-form').find('input').keyup(function(event) {
                if(event.keyCode === 13) {
                    $("#search").click();
                }
            });
            //导航高亮
            highlight_subnav("{:U('promote')}");
            $('.date_select').focus(function() {
                WdatePicker({skin: 'twoer', dateFmt: 'yyyy-MM-dd', maxDate: '%y-%M-%d'});
            });
            //结束日期智能化判断
            if($('input[name="end_time"]').val() === "{$today}"){
                $('input[name="end_time"]').val("");
            }
        });
    </script>
    <script type="text/javascript">
        $('#search-form').css({marginTop:'400px'});
        $('#chart_box').css({height:'400px',width:'700px', marginTop:'50px'});
        var myChart = echarts.init(document.getElementById('chart_box'));
        //礼品卡
        option = {
            title : {
                text : '礼品卡金额'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {$stat.card.legend}
        },
                toolbox: {
            show: true,
                    feature: {
                mark: {show: true},
                dataView: {show: false, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true},
                type : ['tiled'],
            },
            x : '130',
        },
        calculable: true,
                xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {$stat.card.xAxis}
        }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
                series: {$stat.card.data},
        };
        myChart.setOption(option);


        //积分
        $('#chart_box1').css({height:'400px',width:'700px', marginTop:'50px'});
        var myChart1 = echarts.init(document.getElementById('chart_box1'));
        //优惠券
        option = {
            title : {
                text : '积分详情'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {$stat.use_score.legend}
        },
                toolbox: {
            show: true,
                    feature: {
                mark: {show: true},
                dataView: {show: false, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true},
                type : ['tiled'],
            },
            x : '130',
        },
        calculable: true,
                xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: {$stat.use_score.xAxis}
        }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
                series: {$stat.use_score.data},
        };
        myChart1.setOption(option);





    </script>
    <script type="text/javascript">

    </script>
</block>